<template>
  <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <div slot="header" class="clearfix card-title">
                    <span>{{managermentBudgetAll.name}}</span>
                    <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
                </div>
            </div>
            <div style="padding:0px 20px;height:100%">
                <div class="budgetTop">
                    <p class="budgetTopPart1 budgetTopPart">本单位预算执行情况</p>
                    <p class="budgetTopPart2 budgetTopPart">执行率：<span style="color:#0066ff;display:inline-block">{{budgetAllData.budgetZXL}}</span></p>
                    <p class="budgetTopPart3 budgetTopPart">本部门单位排名：<span style="color:#ff6633;display:inline-block">{{budgetAllData.budgetRank}}</span></p>
                </div>
                <div>
                     <div style="width: 73%; height: 100%;float:left;margin-bottom:20px;">
                        <template>
                            <div class="budgetTableTop" >
                                <span>预算执行进度倒排名(按处室)TOP5</span>
                                <div style="float:right">
                                    <span class="icon" style="background:#e02020;border:4px solid rgba(224,32,32,0.1)"></span>
                                    <span style="margin:0px 15px 0px 8px">偏差 &lt; 0</span>
                                    <span class="icon" style="background:#00cc66;border:4px solid rgba(0, 204, 102,0.1)"></span>
                                    <span style="margin:0px 15px 0px 8px">偏差 &gt;0</span>
                                </div>
                            </div>
                            <el-table
                                :header-cell-style="headStyle"
                                :cell-style="tableStyle"
                                :data="budgetTableData1"
                                border
                                stripe
                                size ="small"
                                style="width: 100%">
                                <el-table-column
                                min-width="60px">
                                    <template slot-scope="scope">
                                        <div >{{scope.row.budgetName}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="实际进度"
                                align="right"
                                min-width="72px">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.budgetJD}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="实际与序时(25%)偏差"
                                align="right"
                                width="150px">
                                    <template slot-scope="scope">
                                        <div :class="scope.row.budgetName=='处室一'?'colorG':'colorR'">{{scope.row.budgetPC}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="计划进度"
                                align="right"
                                min-width="70px">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.budgetJHJD}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="实际和计划偏差"
                                align="right"
                                min-width="110px">
                                    <template slot-scope="scope">
                                        <div :class="scope.row.budgetName=='处室一'?'colorG':'colorR'">{{scope.row.budgetJHPC}}</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        
                        </template>
                    </div>
                    <div style="width: 25%; height: 100%;float:right;margin-bottom:20px;">
                        <template>
                            <div class="budgetTableTop" >
                                <span>预算执行进度倒排名(按处室)TOP5</span>
                            </div>
                            <el-table
                                :header-cell-style="headStyle"
                                :cell-style="tableStyle"
                                :data="budgetTableData2"
                                border
                                stripe
                                size ="small"
                                style="width: 100%">
                                <el-table-column
                                label="项目名称">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.budgetName}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="执行进度"
                                align="right"
                                min-width="75px">
                                    <template slot-scope="scope">
                                        <div>{{scope.row.budgetJD}}</div>
                                    </template>
                                </el-table-column>
                                
                            </el-table>
                        
                        </template>
                    </div>
                </div>
               

            </div>
            
        </el-card>    
  </div>
</template>

<script>
import { managermentBudgetAll } from './data/Content.js';
export default {
    name: 'ManagermentBudgetAll',
    data () {
        return {
            managermentBudgetAll: managermentBudgetAll, 
            budgetTableData1:[],
            budgetTableData2:[], 
            budgetAllData:[],
            headStyle: {'background':'#eee','color':'#333','borderColor':'#ddd','fontWeight': '500'},
            tableStyle: {
                'color':'#333','fontWeight': '400'
            },   
        };
    },
    created(){
        this.getInit();
    },
    methods: {
        // rowClassName(row,rowIndex,){
        //     if(row.row.budgetPC==='3%'){
        //         return 'colorG';
        //     }else{
        //         return 'colorR';
        //     }
	    // },
        getInit(){
            this.$axios.get(managermentBudgetAll.url).then((res) => {
                this.budgetAllData = res.data[0].budgetAllData[0];
                this.budgetTableData1 = res.data[0].budgetTableData1;
                this.budgetTableData2 = res.data[0].budgetTableData2;
                
            });
        },
    },
};
</script>

<style lang="scss" scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .colorG{
      color:#009900
  }
  .colorR{color:#E02020}
.budgetTop{
    margin-top: 15px;
    width: 100%;
    height: 40px;
    background: #F8F8F8;
    border-radius: 4px;
    line-height: 40px;
    .budgetTopPart{
        display: inline-block;
        width: 33%;
        text-align: center;
    }
    .budgetTopPart1{
        font-weight: 500;
        color: #333333;
        
    }
    .budgetTopPart2{
        font-weight: 400;
        color: #333333;
        
    }
    .budgetTopPart3{
        font-weight: 400;
        color: #333333;
        
    }
}
.budgetTableTop{
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    span{
        display: inline-block;
    }
}
.icon{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: inline-block;
    font-weight: 400;
    color: #666666;
    font-size: 12px;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
    background: rgba(0, 102, 255, 0.05);
}
 .el-table th>.cell {
    padding-left: 4px;
    padding-right:4px;
}
 .el-table .cell {
    padding-left: 4px;
    padding-right:4px;
}
 .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
    padding-left: 4px;
    padding-right:4px;
}
</style>